<template>
  <basic-dialog
    title="日志"
    :visible="visible"
    :width="1000"
    :class="classNames"
    class="min-w-[1000px] w-auto max-w-[60%] no-header"
    has-footer
    :loading="loading"
    @open="run(record)"
    @closed="handleClose"
  >
    <highlightjs
      ref="el"
      language="accesslog"
      :autodetect="false"
      :code="txtContent"
    >
    </highlightjs>
    <div ref="el" class="hidden"></div>
    <template #footer>
      <el-button class="ml-6 w-[74px]" @click="handleClose"> 关闭 </el-button>
      <el-button
        class="min-w-[74px]"
        :disabled="!isEnd"
        @click="handleDownload(record)"
      >
        <app-icon name="download-file" class="mr-[6px]"></app-icon>
        下载日志
      </el-button>
    </template>
  </basic-dialog>
</template>

<script setup lang="ts">
import hljs from 'highlight.js/lib/core'
import accesslog from 'highlight.js/lib/languages/accesslog'

import type { CertModel } from '@/apis/model/cert'
import { useTerminal } from '@/hooks/useTerminal'
hljs.registerLanguage('accesslog', accesslog)
interface IProps {
  visible: boolean
  record?: { id: string; title: string }
}
const props = withDefaults(defineProps<IProps>(), {
  visible: false,
  record: undefined
})
// 刷新表格事件
interface IEmit {
  (event: 'update:visible', value: boolean): void
  (event: 'refresh-row', row: CertModel): void
}
const emit = defineEmits<IEmit>()
const { el, loading, isEnd, run, request, classNames, dispose, txtContent } =
  useTerminal({
    api: getCertLogApi,
    body: { ...props.record },
    immediate: false
  })
/**
 * 轮询逻辑
 */
let timer: NodeJS.Timer
const clear = watch(
  () => isEnd.value,
  val => {
    if (val) {
      clearInterval(timer)
      clear()
    }
  }
)
watchEffect(() => {
  if (props.visible && !isEnd.value) {
    pollMessage()
  } else {
    clearInterval(timer)
    clear()
  }
})
async function pollMessage() {
  timer = await setInterval(() => {
    clear()
    request(props?.record!)
  }, 3 * 1000)
}

//弹窗关闭
const handleClose = () => {
  emit('update:visible', false)
  txtContent.value = ''
  clearInterval(timer)
  dispose()
}
const handleDownload = (record: any) => {
  useDownloadTxt(txtContent.value, record.title)
}
watch(
  () => txtContent.value,
  val => {
    setTimeout(() => {
      if (val) {
        // 假设你有一个元素的引用，比如通过 document.getElementById 或其他方式获取
        var element = document.querySelector('code')
        element?.scrollTo({
          top: 3000
        })
        // element.scrollTop = element?.scrollHeight
      }
    }, 50)
  }
)
watchEffect(() => {
  if (isEnd.value) {
    getCertApi({ id: props.record?.id! }).then(res => {
      emit('refresh-row', res)
    })
  }
})
onMounted(() => {
  // hljs.highlightAll()
})
</script>

<style lang="scss">
.no-header {
  @apply pt-2;
  .el-dialog__header {
    @apply hidden;
  }
  .el-dialog__body {
    @apply pb-0;
  }
}
pre {
  height: 520px;
  max-height: 520px;
  overflow: auto;
  margin: 0;
}

pre code.hljs {
  display: block;
  overflow-x: auto;
  padding: 5px 10px;
  color: #c9d1d9;
  background: #0d1117;
  height: inherit !important;

  /*!
  Theme: GitHub Dark
  Description: Dark theme as seen on github.com
  Author: github.com
  Maintainer: @Hirse
  Updated: 2021-05-15

  Outdated base version: https://github.com/primer/github-syntax-dark
  Current colors taken from GitHub's CSS
*/

  // .hljs-doctag,
  // .hljs-keyword,
  // .hljs-meta .hljs-keyword,
  // .hljs-template-tag,
  // .hljs-template-variable,
  // .hljs-type,
  // .hljs-variable.language_ {
  //   /* prettylights-syntax-keyword */
  //   color: #ff7b72;
  // }

  // .hljs-title,
  // .hljs-title.class_,
  // .hljs-title.class_.inherited__,
  // .hljs-title.function_ {
  //   /* prettylights-syntax-entity */
  //   color: #d2a8ff;
  // }

  // .hljs-attr,
  // .hljs-attribute,
  // .hljs-literal,
  // .hljs-meta,
  // .hljs-number,
  // .hljs-operator,
  // .hljs-variable,
  // .hljs-selector-attr,
  // .hljs-selector-class,
  // .hljs-selector-id {
  //   /* prettylights-syntax-constant */
  //   color: #79c0ff;
  // }

  // .hljs-regexp,
  // .hljs-string,
  // .hljs-meta .hljs-string {
  //   /* prettylights-syntax-string */
  //   color: #a5d6ff;
  // }

  // .hljs-built_in,
  // .hljs-symbol {
  //   /* prettylights-syntax-variable */
  //   color: #ffa657;
  // }

  // .hljs-comment,
  // .hljs-code,
  // .hljs-formula {
  //   /* prettylights-syntax-comment */
  //   color: #8b949e;
  // }

  // .hljs-name,
  // .hljs-quote,
  // .hljs-selector-tag,
  // .hljs-selector-pseudo {
  //   /* prettylights-syntax-entity-tag */
  //   color: #7ee787;
  // }

  // .hljs-subst {
  //   /* prettylights-syntax-storage-modifier-import */
  //   color: #c9d1d9;
  // }

  // .hljs-section {
  //   /* prettylights-syntax-markup-heading */
  //   color: #1f6feb;
  //   font-weight: bold;
  // }

  // .hljs-bullet {
  //   /* prettylights-syntax-markup-list */
  //   color: #f2cc60;
  // }

  // .hljs-emphasis {
  //   /* prettylights-syntax-markup-italic */
  //   color: #c9d1d9;
  //   font-style: italic;
  // }

  // .hljs-strong {
  //   /* prettylights-syntax-markup-bold */
  //   color: #c9d1d9;
  //   font-weight: bold;
  // }

  // .hljs-addition {
  //   /* prettylights-syntax-markup-inserted */
  //   color: #aff5b4;
  //   background-color: #033a16;
  // }

  // .hljs-deletion {
  //   /* prettylights-syntax-markup-deleted */
  //   color: #ffdcd7;
  //   background-color: #67060c;
  // }

  // .hljs-char.escape_,
  // .hljs-link,
  // .hljs-params,
  // .hljs-property,
  // .hljs-punctuation,
  // .hljs-tag {
  //   /* purposely ignored */
  // }
}
</style>
